<template>
    <div>
        <HomeView></HomeView>
        <div class="order">
            
            <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
            <el-table
                :data="table"
                style="width: 100%">
                <el-table-column
            
                    prop="roleKey"
                    label="编号"
                    width="180">
                </el-table-column>
                <el-table-column
                
                    prop="rname"
                    label="用户名"
                    width="180">
                </el-table-column>
                <el-table-column
                
                    prop="power"
                    label="权限">
                </el-table-column>
                <el-table-column
    
                    prop="uname"
                    label="昵称">
                </el-table-column>
                <el-table-column
    
                    prop="phone"
                    label="电话">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <el-dialog title="新增管理员信息" :visible.sync="dialogVisible" width="30%">
                    <el-form ref="form" :model="table" label-width="80px">
                        
                        <el-form-item label="账号">
                        <el-input v-model="table.rname"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                        <el-input v-model="table.uname"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="add">确 定</el-button>
                    </span>
                    </el-dialog>
    
    
    
        </div>
    </div>
    </template>
    
    <script>
    import HomeView from './HomeView.vue';
    export default{
        components:{
            HomeView
        },
        data(){
            return{
                dialogVisible:false,
                table:[]
            }
        },
        created(){
    
            this.$axios.post('/role/roleList',{},{
              headers:{
                "token":JSON.parse(localStorage.getItem('user')).token
              } 
              })
            .then(response =>{
                    this.form = response.data.data;
                    this.table=this.form
                    for(let i=0;i<this.table.length;i++){
                      this.table[i].id = i
                    if(this.table[i].power==null){
                          this.table[i].power = "超级管理员"
                        }
                        else if(this.table[i].power==1){
                          this.table[i].power = "管理员"
                        }
                    }
                })
            },
            methods:{
                add(){
                    this.$axios.post('/role/register',{
                    rname:this.table.rname,
                    uname:this.table.uname,
                    password:'123',
                    power:1
                },{
                    headers:{
                        "token":JSON.parse(localStorage.getItem('user')).token
                    }
                })
                .then(res=>{
                    if(res.data.msg=='success'){
                        alert("新增成功")
                    }
                    else{
                        alert("新增失败")
                    }
                })
                this.dialogVisible=false
                this.$router.go(0)
            }
            }
    }
    </script>